<template>
    <textarea class="onekit-textarea"
              :class="onekitClass"
              :id="onekitId"
              v-model="text"
              :placeholder="placeholder"
              :disabled="disabled"
              :maxlength="maxlength"
              :autofocus="autoFocus"
              @input="_write"
              @focus="_focus"
              @blur="_blur"
              @keyup.enter="_confirm"
              @isfocus="focus_click"
              :style="{ onekitStyle, position: fixed ? 'fixed' : 'relative' }">
    </textarea>
</template>

<script>
import weixin_behavior from "../../behaviors/weixin_behavior";
import onekit_behavior from "../../behaviors/onekit_behavior";
export default {
  name: "onekit-textarea",
  data () {
    return {
      text: this.value,
      detailData: [],
      isfocus: false,
    };
  },
  mixins: [weixin_behavior, onekit_behavior],
  props: {
    "auto-focus": [Boolean, String],
    value: String,
    placeholder: String,
    disabled: {
      type: [Boolean, String],
      default: false,
    },
    maxlength: [Number, String],
    focus: {
      type: [Boolean, String],
      default: false,
    },
    "auto-height": {
      type: [Boolean, String],
      default: false,
    },
    fixed: {
      type: [Boolean, String],
      default: false,
    },
    "cursor-spacing": {
      type: [String, Number],
      default: -1,
    },
    cursor: {
      type: [String, Number],
      default: -1,
    },
    "selection-start": {
      type: [String, Number],
      default: -1,
    },
    "selection-end": {
      type: [String, Number],
      default: -1,
    },
  },
  methods: {
    _write (event) {
      const { currentTarget, target, timeStamp } = event;
      const detail = {
        value: this.$el.value,
        cursor: this.$el.value.length,
      };
      const e = {
        type: event.type,
        currentTarget,
        detail,
        target,
        timeStamp,
        touches: [],
        changedTouches: [],
      };

      this.$emit("input", e);
      this.$el.style.height = "inherit";
      if (this.autoHeight) {
        this.oldHeight = this.$el.style.height;
        this.$el.style.height = `${this.$el.scrollHeight - 20}px`;
        this.newHeight = this.$el.style.height;

        if (this.oldHeight !== this.newHeight) {
          this.$emit("Heightchange");
        }
      }
    },
    __setCaretPosition (ctrl, pos, start, end) {
      if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(start, end);
      } else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd("character", pos);
        range.moveStart("character", pos);
        range.select();
      }
    },
    _focus (e) {
      this.focus_click(true);
      const { currentTarget, target, timeStamp } = e;
      const detail = {
        value: this.$el.value,
        height: this.$el.scrollHeight,
      };
      const event = {
        type: e.type,
        currentTarget,
        detail,
        target,
        timeStamp,
        touches: [],
        changedTouches: [],
      };

      this.$emit("focus", event);

      if (this.cursor !== -1) {
        this.__setCaretPosition(this.$el, this.cursor, 0, this.cursor);
      }

      if (this.selectionStart !== -1) {
        this.__setCaretPosition(
          this.$el,
          this.cursor,
          this.selectionStart,
          this.$el.value.length - 1
        );
      }

      if (this.selectionEnd !== -1) {
        this.__setCaretPosition(this.$el, this.cursor, 0, this.selectionEnd);
      }
      if (this.cursorSpacing !== -1) {
        setTimeout(() => {
          this.$el.scrollIntoView(true);
        }, 200);
      }
    },
    _blur (e) {
      this.focus_click(false);
      const { currentTarget, target, timeStamp } = e;
      const detail = {
        value: this.$el.value,
      };
      const event = {
        type: e.type,
        currentTarget,
        detail,
        target,
        timeStamp,
        touches: [],
        changedTouches: [],
      };
      this.$emit("Blur", event);
    },
    _confirm (e) {
      const { currentTarget, target, timeStamp } = e;
      const detail = {
        value: this.$el.value,
      };
      const event = {
        type: e.type,
        currentTarget,
        detail,
        target,
        timeStamp,
        touches: [],
        changedTouches: [],
      };
      this.$emit("Confirm", event);
    },
    focus_click (isfocus) {
      this.isfocus = isfocus;
    },
  },
};
</script>

<style scoped>
.onekit-textarea {
  width: 100%;
  outline: none;
  border: none;
  resize: none;
  background: none;
}
</style>
